<template>
    <div class="app" id="bu71">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <div class="ra"><h3>货款账户</h3><span @click="$router.push('/bussBank')">银行卡管理</span></div>
                  <div class="yuansdj">
                    <div>
                      <p style="color: #000;">贷款总额：<span class="jine">0.00</span>元</p>
                    </div>
                    <div>
                      <p style="color: #000;">可用余额：<span class="jine">0.00</span>元</p>
                    </div>
                    <el-button type="danger" @click="dialogVisible = true">提现</el-button>
                  </div>
                  <div class="llads">
                    <div>提现记录<span style="color: #959595;">(共0条信息，仅展示最近的10条记录)</span></div>
                    <!-- <div style="color: blue;">查看全部提现记录></div> -->
                  </div>
                  <el-table
                    :data="tableData"
                    :header-cell-style="yans"
                    style="width: 873px;margin:0 auto;border:solid 1px rgb(220,220,220)">
                    <el-table-column
                      prop="date"
                      label="提现时间"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="金额(元)"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="收款账户">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="提现状态">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="说明">
                    </el-table-column>
                  </el-table>
                  <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>

                  <div class="llads">
                    <div>收支明细<span style="color: #959595;">(共0条信息,仅展示最近一个月记录)</span></div>
                    <!-- <div style="color: blue;">查看全部收支明细></div> -->
                  </div>
                  <el-table
                    :data="tableData"
                    :header-cell-style="yans"
                    style="width: 873px;margin:0 auto;border:solid 1px rgb(220,220,220)">
                    <el-table-column
                      prop="date"
                      label="入账时间"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="金额(元)"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="商户订单号"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="财务类型">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="备注">
                    </el-table-column>
                  </el-table>
                  <div class="feny">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="1000"
                      style="margin-top: 5px;"
                    ></el-pagination>第
                    <el-input size="mini" style="width: 50px;"></el-input>页
                    <button
                      style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;"
                    >跳转</button>
                  </div>

                  <businessF/>
                  
                  
                </div>
              </div>
              
            </div>
        </div>
        <Footer/>
         <el-dialog
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div class="lheds">提示</div>
          <div class="lbody">
            <div class="lbodyb" :class="{lactive:1==lshuj}" @click='lxuanz(1)'>提现到银行卡</div>
            <div class="lbodyb" :class="{lactive:2==lshuj}" @click='lxuanz(2)'>提现到微信</div>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisible = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
        <!-- 提现到微信 -->
        <el-dialog
          :visible.sync="dialogVisiblewx"
          width="30%"
          :before-close="handleClose">
          <div class="lheds">提现到微信</div>
          <div class="lbodywx">
            <el-row>
              <el-col :span="6">提现金额：</el-col>
              <el-col :span="12"><el-input type="text" :placeholder="holder" class="lelinput"></el-input></el-col>
              <el-col :span="6">全部提现</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">支付密码：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
            </el-row>
            <el-row>
              <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
            </el-row>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisiblewx = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
        <!-- 提现到银行卡 -->
        <el-dialog
          :visible.sync="dialogVisibleyh"
          width="30%"
          :before-close="handleClose">
          <div class="lheds">提现到银行卡</div>
          <div class="lbodywx">
            <div class="lyhk">
              <div class="lyhkb">
                <div class="lyhkbb">
                  <p>中国农业银行</p>
                  <p style="text-align: center;">622 **** **** 1546</p>
                  <p style="text-align: right;">解除绑定</p>
                </div>
              </div>
            </div>
            <el-row>
              <el-col :span="6">提现金额：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
              <el-col :span="6">全部提现</el-col>
            </el-row>
            <el-row>
              <el-col :span="6">支付密码：</el-col>
              <el-col :span="12"><el-input type="text" class="lelinput"></el-input></el-col>
            </el-row>
            <el-row>
              <el-col :offset="6" :span="12">将根据提交信息预计到账时间</el-col>
            </el-row>
          </div>
          <el-button style="margin: 0 auto;display: block;" type="primary" @click="dialogVisiblewx = false">确 定</el-button>
          <div style="height:15px"></div>
        </el-dialog>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        dialogVisible: false,
      dialogVisiblewx: false,
      dialogVisibleyh: false,
      lshuj:0,
      holder:"",
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }]
      }
      
    },
    methods: {
      yans({rowIndex}){
        if(rowIndex==0){
          return "background:rgb(239,239,239)"
        }
      },
      lxuanz(ax){
        this.lshuj=ax;
        if(ax==2){
          this.dialogVisiblewx=true
        }else if(ax==1){
          this.dialogVisibleyh=true
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    },
}
</script>
<style lang="stylus">
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
#bu71{



.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
  padding-bottom: 10px;
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cecece;
}
.conres .ra h3{
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  margin-top: 15px;
  padding-bottom: 10px;
}
.conres .ra span{
  line-height: 52px;
  margin-right: 14px;
  color: blue;
}
.yuansdj{
  display: flex;
  justify-content: space-between;
  margin: 15px;
  line-height: 40px;
}
.jine{
    color: rgb(245,108,108);
    font-size: 22px;
}
.llads{
    display: flex;
    justify-content: space-between;
    margin: 15px;
}
.el-dialog__header{
  padding: 0px !important;
}
.el-dialog__body{
  padding: 0px !important;
}
.lheds{
  width: 100%;
  height: 60px;
  background-color: rgb(240, 96, 72);
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
.lbody{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.lbodyb{
  width: 40%;
  border: solid 1px rgb(160, 160, 160);
  height: 76px;
  line-height: 76px;
  text-align: center;
  margin: 30px 0px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  font-size: 18px;
  color: rgb(160, 160, 160);
}
.lactive{
  border: solid 1px rgb(240, 96, 72);
  color: rgb(240, 96, 72);
}
.lbodywx{
  width: 80%;
  margin: 0 auto;
}
.lbodywx .el-input__inner{
  height: 20px;
}
.el-row {
    margin: 20px 0px;
}
.lyhk{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lyhkb{
  width: 40%;
  height: 97px;
  margin-top: 15px;
  border: solid 1px rgb(240, 96, 72);
}
.lyhkbb{
  width: 90%;
  height: 77px;
  margin:10px auto;
  border-radius: 3px;
  background-color: rgb(137,201,151);
}


}


</style>